<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            min-width: 1060px;
            background: #fff;
        }

        body {
            width: 100%;
            max-width: 2560px;
            margin: 0 auto;
            background: #ccc;
            overflow: hidden;
        }

        canvas {
            object-fit: cover;
        }
    </style>
</head>

<body>
    <script>

        // 创建画布

        const canvasElem = document.createElement('canvas')
        document.body.append(canvasElem)

        const ctx = canvasElem.getContext('2d')


        // 设置画布大小
        // 依据：b站主页缩放至50%时，Banner显示的最大值
        const canvasSize = {
            w: 2560,
            h: 240
        }

        canvasElem.setAttribute('width', canvasSize.w)
        canvasElem.setAttribute('height', canvasSize.h)


        // 设置填充样式为红色
        ctx.fillStyle = 'red';
        // 填充整个 Canvas 画布
        ctx.fillRect(0, 0, 2560, 240);

        // 视频
        const video = document.createElement('video')
        document.body.append(video)

        video.src = './src/528d9376-f0fd-4445-9840-13e7559d6056.webm'
        video.muted = true
        video.loop = true
        video.autoplay = true
        video.style.opacity = 0
        video.style.position = 'absolute'

        // 页面大小变更时触发
        function winResize() {

            const widthOffset = window.innerWidth - canvasSize.w

            if (widthOffset < 0) {
                canvasElem.style.marginLeft = widthOffset / 2 + 'px'
            } else {
                canvasElem.style.margin = '0 auto'
            }
        }

        fetch('./src/base.json')
            .then(res => res.text())
            .then(data => {
                // console.log(JSON.parse(data));

                draw(JSON.parse(data), 100)
            })


        const scaleFactor = 0.8
        function draw(imgSet, duration = null) {
            // ctx.fillStyle = '#fff'
            // ctx.fillRect(0, 0, canvasElem.width, canvasElem.height)

            // ctx.clearRect(0, 0, canvasElem.width, canvasElem.height)


            if (duration) {
                let i = 0
                for (let k in imgSet) {
                    setTimeout(() => {
                        const img = new Image()
                        img.src = imgSet[k]
                        img.onload = function () {
                            ctx.drawImage(this, 0, 0, img.width * scaleFactor, img.height * scaleFactor)
                        }
                    }, duration * i)
                    i++
                }


                setTimeout(() => draw(imgSet), 1000 / 24 + (duration * Object.keys(imgSet).length))
            } else {
                let i = 0
                for (let k in imgSet) {
                    const img = new Image()
                    img.src = imgSet[k]
                    img.onload = function () {
                        ctx.drawImage(this, 0, 0, img.width * scaleFactor, img.height * scaleFactor)
                        i++
                        console.log(i);


                        if (i >= Object.keys(imgSet).length) {
                            console.log(1111111);

                            setTimeout(() => draw(imgSet), 1000 / 24)
                        }
                    }
                }
            }
        }

        winResize()
        window.addEventListener('resize', () => {
            winResize()

            // console.log(window.innerWidth, window.innerHeight);

            // canvasElem.style.scale = window.innerWidth / canvasSize.w
            // canvasElem.style.marginLeft = '-50%'

        })

    </script>
</body>

</html>